<template>
  <div class="chart-main">
    <div class="chart-container">
      <div :id="`chartDiv${charId}`" class="chartDemo"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    charData: {
      require: true,
    },
  },
  data() {
    return {
      //   chartDiv: this.$refs.chartDiv,
      charId: "",
    };
  },
  watch: {},
  methods: {
    updateChartData(charDataDetail) {
      this.charId = charDataDetail.id;
      const chartDiv = document.getElementById(`chartDiv${charDataDetail.id}`);
      if (chartDiv) {
      }
      const chartDemo = echarts.init(chartDiv);
      const chartOption = {
        tooltip: {
          trigger: "axis",
        },
        title: {
          left: "center",
          text: charDataDetail.text,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          name: "时间",
          data: charDataDetail.xAxisData,
          axisLine: {
            show: true,
            symbol: ["none", "arrow"],
            symbolOffset: [0, 10],
          },
        },
        yAxis: {
          type: "value",
          name: "总数",
          axisLine: {
            show: true,
            symbol: ["none", "arrow"],
            symbolOffset: [0, 10],
          },
        },
        series: [
          {
            name: charDataDetail.name,
            data: charDataDetail.seriesData,
            type: "line",
            areaStyle: {},
          },
        ],
      };
      chartDemo.setOption(chartOption);
    },
  },
  mounted() {
    setTimeout(() => {
      this.updateChartData(this.$props.charData);
      // console.log("ttt", this.$props.charData);
    }, 200);
  },
};
</script>

<style lang="scss" scoped>
.chart-main {
  width: 100%;
  display: flex;
  //background-color: red;
  justify-content: center;
  .chart-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    background-color: transparent;
    .chartDemo {
      width: 100% !important;
      height: 350px !important;
    }
  }
}
</style>
